<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style media="print">
		.Noprint {
			display: none;
		}

		.PageNext {
			page-break-after: always;
		}

		.NoBorder {
			border: none !important;
		}

		html,
		body {
			padding: 0px !important;
			margin: 0px !important;
		}
	</style>
	<style id="pagedivStyle">
		.pagediv-border {
			border: 1px solid #cccccc;
			background-color: #fff;
			display: table;
			/* height: auto !important;
			padding-top: 0 !important;
			padding-bottom: 0 !important; */
		}
	</style>
	<style>
		html {
			padding: 10px 10px 20px;
		}

		body {
			height: 100%;
			margin: 0;
		}
		
		table, tr, td, th, tbody, thead, tfoot {page-break-inside: avoid !important;}

		.div-box {
			font-size: 12px;
		}

		.pagebody table {
			border-color: #fff;
		}

		/* .pagebody table>tbody>tr+tr>td {
			border-top-width: 0 !important;
		} */

		.pagebody table>tbody>tr>td+td,
		.pagebody table>tbody>tr>th+th {
			border-left-width: 0 !important;
		}

		.div-box * {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}

		.table-grid-cell-inner {
			text-overflow: ellipsis;
			padding: 3px 6px 4px 6px;
		}

		.childFunc table tr.firstRow td {
			border-top: 0px !important;
		}

		.childFunc table tr.lastRow td {
			border-bottom: 0px !important;
		}

		.childFunc table tr td.firstCol {
			border-left: 0px !important;
		}

		.childFunc table tr td.lastCol {
			border-right: 0px !important;
		}

		.field-text {
			display: inline-block;
			vertical-align: baseline;
		}
	</style>
	<script src="../babel-polyfill/polyfill.min.js"></script>
	<script>
		//加载数据
		var printKey = window.name;
		var printConfig;
		try {
			printConfig = window.localStorage && JSON.parse(window.localStorage.getItem(printKey)) || {};
		} catch (e) {

		}
		if (!printConfig) {
			alert('打印信息失效，请重新打印！');
			window.close();
		} else {
			var css = printConfig.css || [];
			for (var i = 0; i < css.length; i++) {
				document.write('<link rel="stylesheet" type="text/css" href="' + css[i] + '"/>');
			}
		}
	</script>
</head>

<body>
	<div>
		<p style="padding:10px;" class="Noprint print-setting">
			<input class="Noprint" type="button" name="f-" onclick="zoom('+','');" value="等比例+">
			<input class="Noprint" type="button" name="f-" onclick="zoom('-','');" value="等比例-">
			<input class="Noprint" type="button" name="f-" onclick="zoom('+','X');" value="横向+">
			<input class="Noprint" type="button" name="f-" onclick="zoom('-','X');" value="横向-">
			<input class="Noprint" type="button" name="f-" onclick="zoom('+','Y');" value="纵向+">
			<input class="Noprint" type="button" name="f-" onclick="zoom('-','Y');" value="纵向-">
			<input class="Noprint" type="button" name="button_export" onclick="javascript:window.print();"
				style="margin-left:50px;" value="打印">
			<input id="pdfBtn" class="Noprint" type="button" name="button_export" onclick="createImg();" value="生成PDF">
		</p>
	</div>
	<!-- 打印的内容 -->
	<div id=printHtmlBody class="div-box"></div>

</body>
<script src="../jquery/jquery-3.3.1.min.js"></script>
<script src="./jspdf/jspdf.min.js"></script>
<!-- <script src="../html2canvas/vsersion0.5alp/html2canvas.js"></script> -->

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script language="javascript">
	//打印缩放
	var scaleX = 1, scaleY = 1;
	var zoom = function (jj, xy) {
		var pages = printHtmlBody.querySelectorAll('div.pagediv-border div.pagebody');
		if (xy == 'X' || xy == '') {
			scaleX += jj == '+' ? 0.01 : -0.01;
		}
		if (xy == 'Y' || xy == '') {
			scaleY += jj == '+' ? 0.01 : -0.01;
		}
		for (var i = 0; i < pages.length; i++) {
			var page = pages[i];
			page.style['-webkit-transform'] = 'scale(' + scaleX + ',' + scaleY + ')';
			page.style.transformOrigin="0 0";  // 以元素基准点 0 0 进行缩放  因为缩放默认基准点是 50% 50%
		}
	}

	//显隐打印设置
	document.querySelector('.print-setting').style.display = printConfig.print == '1' ? '' : 'none';
	if (printConfig.print != '1') {
		document.getElementById('pagedivStyle').remove();
		//非打印状态修改样式
		document.getElementById('printHtmlBody').style.width = '1200px';
		document.getElementById('printHtmlBody').style.margin = '0 auto';
		document.getElementById('printHtmlBody').style.background = '#fff';
		document.body.style.background = '#f0f2f5';
	}
	document.title = printConfig.title || '打印预览'
	//设置页面
	document.getElementById('printHtmlBody').innerHTML = decodeURIComponent(printConfig.htmlTpl);
	//获取相对位置
	var getOffsetBox = function (source, target) {
		var box = { x: source.offsetLeft, y: source.offsetTop };
		if (target && source.offsetParent != target) {
			var _box = getOffsetBox(source.offsetParent, target);
			box.x += _box.x;
			box.y += _box.y;
		}
		return box;
	}
	//添加印章
	var addSeal = function (ocfg) {
		if (!ocfg.file) return;
		var sealDom = document.querySelector('span[data-name="' + ocfg.sealLocaltion + '"]');
		if (!sealDom) {
			alert('印章字段没找到：' + ocfg.sealLocaltion);
			return;
		}
		var sealStyle = ocfg.sealPrintStyle || ocfg.sealStyle || '';//样式
		var sealOffset = ocfg.sealPrintOffset || ocfg.sealOffset;//偏移量
		sealOffset = sealOffset ? sealOffset.split(',') : [];
		var sealSize = ocfg.sealSize ? ocfg.sealSize.split(',') : [];//大小
		//印章dom
		var img = document.createElement('img');
		img.setAttribute('src', ocfg.file);
		img.setAttribute('style', 'position: absolute;' + sealStyle);
		var pageBody = document.querySelector('.pagediv-border');
		var offsetBox = getOffsetBox(sealDom, pageBody);

		var x = offsetBox.x, y = offsetBox.y;
		if (sealOffset[0]) {
			x += Number(sealOffset[0]);
		}
		if (sealOffset[1]) {
			y += Number(sealOffset[1]);
		}
		if (sealSize[0]) {
			img.style.width = sealSize[0] + 'px';
		}
		if (sealSize[1]) {
			img.style.height = sealSize[1] + 'px';
		}
		img.style.left = x + 'px';
		img.style.top = y + 'px';
		sealDom.parentNode.appendChild(img)

	}
	//设置章
	var seals = printConfig.seals;
	if (seals) {
		for (var i = 0; i < seals.length; i++) {
			var sealDom = document.querySelector('span[data-name="' + seals[i].sealLocaltion + '"]');
			if (sealDom) {
				sealDom.innerHTML = '&nbsp;';
			}
		}
		for (var i = 0; i < seals.length; i++) {
			addSeal(seals[i]);
		}
	}

</script>
<script>
	// 更改表单样式  解决safafi 像素差异导致内容超出最外层容器的问题  暂时不管
	/* $('.ueditor-box').children(":first").css({'height': '10px', 'overflow': 'hidden'});
	$('.ueditor-box').children(":last").css({'height': '10px', 'overflow': 'hidden'});
	$($('.firstRow td p')[1]).css({'height': '10px', 'overflow': 'hidden'}); */
	// 是否启用生成pdf按钮
	if (printConfig.usePdf && printConfig.print == '1') {
		$('#pdfBtn').show();
	} else {
		$('#pdfBtn').hide();
	}
	// 生成图片
	function createImg() {
		$(".pagediv-border").css({ 'border': 0 });
		html2canvas($(".pagediv-border")[0], {
			allowTaint: true,
			dpi: 192,//导出pdf清晰度
		}).then(function (canvas) {
			$(".pagediv-border").css({ 'border': '1px solid #ccc' });
			// $('body').append(canvas)
			// return
			var contentWidth = canvas.width;
			var contentHeight = canvas.height;

			//一页pdf显示html页面生成的canvas高度;
			var pageHeight = contentWidth / 592.28 * 841.89;
			//未生成pdf的html页面高度
			var leftHeight = contentHeight;
			//页面偏移
			var position = 0;
			//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
			var imgWidth = 595.28;
			var imgHeight = 592.28 / contentWidth * contentHeight;

			var pageData = canvas.toDataURL('image/jpeg', 1.0);
			var pdf = new jsPDF('', 'pt', 'a4');

			//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
			//当内容未超过pdf一页显示的范围，无需分页
			if (leftHeight < pageHeight) {
				pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
			} else {
				while (leftHeight > 0) {
					pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
					leftHeight -= pageHeight;
					position -= 841.89;
					//避免添加空白页
					if (leftHeight > 0) {
						pdf.addPage();
					}
				}
			}

			var popmodel = window.prompt('请自定义文件名', popmodel || printConfig.title || printKey);
			if (popmodel && popmodel.trim()) {
				pdf.save(popmodel + ".pdf");
			} else if (popmodel && popmodel.trim() == '') {
				return alert('文件名不能为空,请重新尝试');
			}

		});
	}

</script>

</html>